<template>
  <div class="shopnxin">
    <van-tabs>
      <van-tab class="shopnxin_one" title="标签 1">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            class="activeKey"
            v-for="(v, i) in datas"
            :key="i"
            :title="v.name"
            badge=""
          />
        </van-sidebar>
        <div>
          <div class="shopnxin_two" v-for="(v, i) in datas" :key="i">
            <div class="shopnxin_three">
              <div class="shopnxin_four">
                <div>
                  <span class="shopnxin_four_span1">{{ v.name }}</span>
                  <span class="shopnxin_four_span2">{{ v.description }}</span>
                </div>
                <div class="shopnxin_five">...</div>
              </div>
              <div class="shopnxin_six">
                <ul class="shopnxin_senve">
                  <li v-for="(item, index) in datas[i].foods" :key="index">
                    <!-- 图片 -->
                    <img
                      :src="'//elm.cangdu.org/img/' + item.image_path"
                      alt=""
                    />
                    <div>
                        
                      <!-- 阿斯顿 -->
                      <div class="asd_ds">
                        <h3 class="asd">
                          {{ item.name }}
                        </h3>
                        <span v-if="item.attributes[0] != null">
                          <!-- 招牌-->
                          <span
                            class="zhaopai"
                            v-if="item.attributes[0].icon_name != news"
                          >
                            {{ item.attributes[0].icon_name }}
                          </span>
                        </span>
                      </div>
                      <!-- 的撒旦 -->
                      <p class="desadan">{{ item.description }}</p>
                      <!-- 月售好评 -->
                      <div class="price_shopa">
                        <span>月售{{ item.month_sales }}</span
                        ><span class="price_shopa_span1"
                          >好评率{{ item.satisfy_rate }}%</span
                        >
                      </div>
                      <!-- 打围群岛 -->
                      <div class="dwqd_homes" v-if="item.activity != null">
                        {{ item.activity.image_text }}
                      </div>
                      <!-- 价格 -->
                      <div class="price_homes">
                        <span class="price_homes_span1">
                          ￥<span>{{ item.specfoods[0].price }}</span
                          >起</span
                        >
                        <span
                          class="price_homes_span2"
                          v-if="item.specfoods.length <= 1"
                        >
                          <!-- 点击?出来的  item.__v-->
                          <span
                            v-show="show"
                            @click="item.__v = --item.__v < 0 ? 0 : item.__v"
                            ><i class="iconfont icon-jianhao1 jj_homes"></i
                          ></span>
                          <span v-show="show" class="zreo_homes">{{
                            item.__v
                          }}</span>
                          <!-- +号 -->
                          <span
                            @click="
                              jiao(index);
                              index = show = true;
                              item.__v++;
                            "
                            ><i class="iconfont icon-jiahao1  jj_homes"></i
                          ></span>
                        </span>
                        <!-- 选规格 -->
                        <span
                          class="xgg_homes"
                          v-if="item.specfoods.length > 1"
                        >
                          选规格
                        </span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="标签 2">内容 2</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "storeDetail",
  data() {
    return {
      news: "新",
      datas: [],
      activeKey: 0,
      datas2: [],
      show: false,
      count: 0
    };
  },
  methods: {
    jiao(index) {
      console.log(index);
      // this.show = true;
    }
  },
  created() {
    console.log(this.$route.query.id);
    this.axios
      .get(
        `https://elm.cangdu.org/shopping/v2/menu?restaurant_id=${this.$route.query.id}`
      )
      .then(res => {
        this.datas = res.data;
        // console.log(res.data[0].foods);
      });
  }
};
</script>

<style>
.van-sidebar-item--select::before {
  height: 1.7297rem;
  background-color: #aaff;
}
.shopnxin_one {
  display: flex;
  margin-top: 0.0811rem;
  border-top: 0.027rem solid #ebebeb;
}
.shopnxin_two {
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
}
.shopnxin_four_span1 {
  font-size: 0.4324rem;
  color: #666666;
  padding-left: 0.1351rem;
}
.shopnxin_four_span2 {
  font-size: 0.3243rem;
  color: #999999;
}
.shopnxin_five {
  color: #ccc;
  padding-right: 0.1351rem;
}
.activeKey {
  font-size: 0.3243rem;
}
/* // 热销榜 */
.shopnxin_four {
  width: 8.1081rem;
  display: flex;
  justify-content: space-between;
  background-color: #aaff;
}
/* 商品详情 */
.shopnxin_six {
  width: 8.1081rem;
  display: flex;
  background-color: red;
}
/* // 图片 */
.shopnxin_six img {
  width: 1.267rem;
  height: 1.3211rem;
  margin-right: 0.2703rem;
}
/* 设置商品详情弹性盒子 */
.shopnxin_senve > li {
  width: 7.5676rem;
  display: flex;
  background-color: #aaff;
  font-size: 0.3243rem;
  margin: 0.2703rem;
}
/* 阿斯顿 */
.asd {
  font-size: 0.4324rem;
}
/* // 招牌 */
.zhaopai {
  font-size: 0.3243rem;
  color: red;
  border: 0.027rem solid red;
  padding: 0.027rem;
  border-radius: 0.2162rem;
}
.asd_ds {
  width: 5.9459rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2162rem;
}
/* // 的撒旦 */
.desadan {
  color: #ccc;
}
/* // 月售好评 */
.price_shopa {
  margin-top: 0.1351rem;
  margin-bottom: 0.0811rem;
}
.price_shopa_span1 {
  margin-left: 0.1351rem;
}
/* // 打围群岛 */
.dwqd_homes {
  margin-top: 0.1351rem;
  margin-bottom: 0.2703rem;
  width: 1.3514rem;
  text-align: center;
  color: #ff8080;
  border: 0.027rem solid #ff8080;
  border-radius: 0.2162rem;
  box-sizing: border-box;
}
/* // 价格 */
.price_homes {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5405rem;
}
.price_homes_span1 {
  color: #f60;
}
.price_homes_span1 > span {
  font-size: 0.4324rem;
  font-weight: bold;
}
/* // 选规格 */
.xgg_homes {
  background-color: #0092e8;
  padding: 0.0811rem 5px;
  border-radius: 0.1351rem;
  color: #fff;
}
/* // 加号减号 */
.jj_homes {
  color: #0092e8;
}
/* // 0 */
.zreo_homes {
  margin: 0 0.0811rem;
  vertical-align: bottom;
}
</style>
